<template>
    <div id="mapId" style="width:100%;height:100%;min-height: 520px;"></div>
  </template>
   
  <script lang="ts">
  
  import { defineComponent, onMounted, ref } from 'vue';
  import AMapLoader from '@amap/amap-jsapi-loader';
   
  export default defineComponent({
    setup() {
      const map = ref<AMap.Map | null>(null);
   
      onMounted(() => {
        AMapLoader.load({
          key: '8cdf9d2591c90cc9b98344ad3c11081a', // 高德地图API Key
          version: '1.4.15', // 指定API版本
          plugins: ['AMap.Geolocation', 'AMap.PlaceSearch', 'AMap.Scale'], // 需要使用的插件
        }).then((AMap) => {
          map.value = new AMap.Map('mapId', {
            zoom: 11, // 初始缩放级别
            center: [110.413847,21.245195], // 初始中心点坐标-深圳
            viewMode:'3D'  //使用3D视图
          });
        }).catch((e) => {
          console.error(e);
        });
      });
   
      return {
        map,
      };
    },
  });
  </script>